import React from "react";
//导入 antd 中的 Button 组件
import {useState} from 'react';
import { Button } from "antd";
import { Space, Typography } from 'antd';
import { AlipayCircleOutlined, DribbbleOutlined,SearchOutlined } from "@ant-design/icons";

const { Text, Link } = Typography;
const { Paragraph } = Typography;

export default function AntdCom() {
  //声明状态
  const [editableStr, setEditableStr] = useState('This is an editable text.');

  return (
    <div>
      <h2>按钮</h2>
      <Button>测试按钮</Button>
      <Button type="primary" icon={<SearchOutlined />}>
        Search
      </Button>
      <div className="h-20"></div>

      <h2>图标</h2>
      <Space>
        <AlipayCircleOutlined style={{ fontSize: 24 }} />
        <DribbbleOutlined style={{ fontSize: 24 }} />
      </Space>
      <div className="h-20"></div>

      <h2>排版</h2>
      <Text type="danger">Ant Design (danger)</Text>
      <div className="h-20"></div>

      <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
      <Paragraph copyable> xx </Paragraph>
    </div>
  );
}
